<template>
  <div class="maincss">
    <div>
      <el-card class="mainItem card-key">
        <div class="card-head">
          <div class="cell-title">关键指标</div>
          <div class="cell-ser">
            <!--          <el-row>-->
            <!--            <el-col span="3">-->
            <!--              <el-tree-->
            <!--                placeholder="科室"-->
            <!--                :data="deptOptions"-->
            <!--                :props="defaultProps"-->
            <!--                :expand-on-click-node="false"-->
            <!--                :filter-node-method="filterNode"-->
            <!--                ref="tree"-->
            <!--                :default-expand-all="false"-->
            <!--                @node-click="handleNodeClick"-->
            <!--              />-->
            <!--            </el-col>-->
            <!--          </el-row>-->
            <el-date-picker v-if="indexShow"
                            v-model="indexDate"
                            @change="handleIndexDateChange"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
            >
            </el-date-picker>
            <el-select v-model="date" @change="handleDateChange" placeholder="请选择">
              <el-option
                v-for="item in dateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="key-indicator">
          <div class="list" v-for="item in keyPoints" :key="item.index">
            <div class="list-title">
              <p class="target">{{ item.number }}</p>
              <p class="title">{{ item.name }}</p>
            </div>
            <div class="list-text">
              <div class="basis"><span>月环比</span> <i
                :class="item.onType > 0? 'el-icon-caret-top': 'el-icon-caret-bottom'"></i>
                <span>{{ item.linkRate }}%</span></div>
              <div class="basis"><span>月同比</span> <i
                :class="item.linkType > 0? 'el-icon-caret-top': 'el-icon-caret-bottom'"></i>
                <span>{{ item.onRate }}%</span></div>
            </div>
          </div>
        </div><!---key-indicator 关键指标---->

      </el-card>
    </div>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12">
        <el-card class=" index-card">
          <!--          <a class="morenbtn" @click="toMore"><i class="el-icon-arrow-right"></i></a>-->
          <el-tabs v-model="activeName">
            <el-tab-pane label="个人待办" name="first">
              <div class="news-list">
                <div class="list" v-for="item in todoList" :key="item.index">
                  <div class="title"><a>{{ item.msgTitle }}</a></div>
                  <div class="time">{{ item.createTime }}</div>
                  <a class="" @click="toMore"><i class="el-icon-arrow-right"></i></a>
                </div>
              </div>

            </el-tab-pane>

          </el-tabs>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="12">
        <el-card class=" index-card">
          <!--          <a class="morenbtn" @click="toMore"><i class="el-icon-arrow-right"></i></a>-->
          <el-tabs v-model="activeName2">
            <el-tab-pane label="通知公告" name="first">
              <div class="news-list">
                <div class="list" v-for="item in msgInfo" :key="item.index">
                  <div class="title"><a>{{ item.msgTitle }}</a></div>
                  <div class="time">{{ item.createTime }}</div>
                  <a class="" @click="toMore"><i class="el-icon-arrow-right"></i></a>
                </div>
              </div>

            </el-tab-pane>

          </el-tabs>
        </el-card>
        <!--        <el-card class="index-card  ">-->
        <!--          <div class="card-head">-->
        <!--            <div class="cell-title">通知公告</div>-->
        <!--            <a class="morenbtn" @click="toMore"><i class="el-icon-arrow-right"></i></a>-->
        <!--          </div>-->
        <!--          <div class="notice-text">-->
        <!--            <div class="title">{{ msgInfo.title }}</div>-->
        <!--            <div class="text">-->
        <!--              {{ msgInfo.content }}-->
        <!--            </div>-->

        <!--            <div class="inscribe">{{ msgInfo.org }}</div>-->

        <!--            <div class="time">{{ msgInfo.time }}</div>-->
        <!--          </div>-->


        <!--        </el-card>-->
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12">
        <el-card class="index-card">
          <EchartsLine/>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="12">
        <el-card class="index-card">

          <EchartsPie/>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import EchartsLine from '../components/echartsLine/index.vue'
import EchartsPie from '../components/echartsPie/index.vue'
import IconsDialog from './tool/build/IconsDialog.vue';
import {selectIndicatorList} from "@/api/business/homePage"
import {listNotifyMsg} from "@/api/business/notifyMsg"
import {treeselect} from "@/api/system/dept";
import {parseTime, getNearWeek, nowDate, oneMonth, haflYear, reactYear} from '@/utils/ruoyi'

export default {
  components: {IconsDialog, EchartsLine, EchartsPie},
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.6.0",
      activeName: 'first',
      activeName2: 'first',
      date: '1',
      dep: '',
      area: '',
      indexShow: false,
      indexDate: [],
      dateOptions: [{
        value: '1',
        label: '最近30天'
      }, {
        value: '2',
        label: '最近一周'
      }, {
        value: '3',
        label: '最近半年'
      }, {
        value: '4',
        label: '最近一年'
      }, {
        value: '5',
        label: '自定义'
      }],
      depOptions: [],
      areaOptions: [],
      keyPoints: [],
      todoList: [],
      msgInfo: [],
      // 部门树选项
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      queryParams: {
        deptId: '',
        startTime: '',
        endTime: ''
      }
    };
  },
  created() {
    this.getTreeselect()
    this.$nextTick(() => {
      this.queryParams.startTime = parseTime(oneMonth())
      this.queryParams.endTime = parseTime(nowDate())
      this.getKeyPoints()
      this.getMsg()
      this.getTodoList()
    })
  },
  methods: {
    toMore() {
      this.$router.push({path: "/message/inform"});
    },
    handleDateChange() {
      this.indexShow = false
      switch (this.date) {
        case '1':
          this.queryParams.startTime = parseTime(oneMonth())
          break;
        case '2':
          this.queryParams.startTime = parseTime(getNearWeek(-7))
          break;
        case '3':
          this.queryParams.startTime = parseTime(haflYear())
          break;
        case '4':
          this.queryParams.startTime = parseTime(reactYear())
          break;
        case '5':
          this.indexShow = true
          break;
        default:
          this.queryParams.startTime = parseTime(oneMonth())
          this.queryParams.endTime = parseTime(nowDate())
          break;
      }
      if (this.date != '5') {
        this.getKeyPoints()
      }
    },
    handleIndexDateChange() {
      this.queryParams.startTime = parseTime(this.indexDate[0])
      this.queryParams.endTime = parseTime(this.indexDate[1])
      this.getKeyPoints()
    },
    // 代办
    getTodoList() {
      this.todoList = []
      listNotifyMsg({
        type: 1
      }).then((res) => {
        this.todoList = res.rows
      })
    },
    // 公告
    getMsg() {
      this.msgInfo = []
      listNotifyMsg({
        type: 2
      }).then((res) => {
        this.msgInfo = res.rows
      })
    },
    // 关键指标
    getKeyPoints() {
      selectIndicatorList(this.queryParams).then((res) => {
        this.keyPoints = res
      })
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    }
  },
};
</script>

<style scoped lang="scss">

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.dateSel {
  float: right;
  top: 10px;
}

</style>

